<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
            <el-form-item label="叙词名称" prop="wordName">
                <el-input
                    v-model="queryParams.wordName"
                    placeholder="请输入叙词名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="叙词拼音" prop="wordPinyin">
                <el-input
                    v-model="queryParams.wordPinyin"
                    placeholder="请输入叙词拼音"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="叙词英文" prop="wordEnglish">
                <el-input
                    v-model="queryParams.wordPid"
                    placeholder="请输入叙词英文"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['system:thesauriWord:add']"
                >新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['system:thesauriWord:edit']"
                >修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['system:thesauriWord:remove']"
                >删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-s-data"
                    size="mini"
                    @click="handleGraphic"
                >图形化展示
                </el-button>
            </el-col>
            <!--      <el-col :span="1.5">-->
            <!--        <el-button-->
            <!--          type="warning"-->
            <!--          plain-->
            <!--          icon="el-icon-download"-->
            <!--          size="mini"-->
            <!--          :loading="exportLoading"-->
            <!--          @click="handleExport"-->
            <!--          v-hasPermi="['system:thesauriWord:export']"-->
            <!--        >导出</el-button>-->
            <!--      </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="thesauriWordList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="叙词名称" align="center" prop="wordName"/>
            <el-table-column :label="itemR.nameZh"  align="center" v-for="(itemR, indexR) in thesauriWordRelationList" >
                <template slot-scope="scope">
                    <el-button class="relatedWords" @click="handleUpdateReference(item)" v-for="item in scope.row[itemR.nameEn].slice(0,3)">{{item.referenceWordName}}</el-button>
                    <el-button plain type="primary" class="addTo" @click="handleAddAssociation(scope.row, itemR)" v-hasPermi="['system:thesauriWordReference:add']">+</el-button>
                    <el-button plain type="success" class="addTo" @click="handleExpandTheAssociationList(scope.row, itemR)" v-if="scope.row[itemR.nameEn].length > 3">展开</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                        v-hasPermi="['system:thesauriWord:edit']"
                    >修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['system:thesauriWord:remove']"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!-- 添加或修改叙词表数据加工对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
                <el-form-item label="叙词名称" prop="wordName">
                    <el-input v-model="form.wordName" placeholder="请输入叙词名称"/>
                </el-form-item>
                <el-form-item label="是否族首词" prop="isTopTerm">
                    <el-select v-model="form.isTopTerm" placeholder="请选择是否族首词" >
                        <el-option
                            v-for="item in [{value:0, label:'否'},{value:1, label:'是'}]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="叙词拼音" prop="wordPinyin">
                    <el-input v-model="form.wordPinyin" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="叙词英文" prop="wordEnglish">
                    <el-input v-model="form.wordEnglish" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="叙词分类" prop="thesauriWordCategoryIds">
<!--                    <el-input v-model="form.thesauriWordCategoryIds" placeholder="请输入叙词分类"/>-->
                    <el-input placeholder="请点击选择叙词分类" v-model="form.thesauriWordCategoryNames" :disabled="true">
                        <template slot="append">
                            <el-button @click="handleSelectThesauriWordCategory">点击选择</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="含义注释" prop="scopeNote">
                    <el-input v-model="form.scopeNote" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="用法注释" prop="usageNote">
                    <el-input v-model="form.usageNote" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="历史注释" prop="historicalNote">
                    <el-input v-model="form.historicalNote"  type="textarea" placeholder="请输入历史注释"/>
                </el-form-item>
<!--                <el-form-item label="叙词父节点" prop="wordPid">-->
<!--                    <el-input v-model="form.wordPid" placeholder="请输入叙词父节点"/>-->
<!--                </el-form-item>-->
                <el-form-item label="是否正式主题词" prop="wordFormal">
                    <el-select v-model="form.wordFormal" placeholder="请选择是否正式主题词">
                        <el-option
                            v-for="item in [{value:0, label:'否'},{value:1, label:'是'}]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属叙词表" prop="thesauriWordModuleId">
                    <el-select v-model="form.thesauriWordModuleId" placeholder="请选择所属叙词表" disabled>
                        <el-option
                            v-for="item in thesauriWordModuleList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm"  v-if="checkPermi(['system:thesauriWord:edit']) || (relationshipId && checkPermi(['system:thesauriWordReference:edit']))">确 定</el-button>
                <el-button type="danger" @click="handleDeleteAssociation"  v-if="checkPermi(['system:thesauriWordReference:remove']) && relationshipId && !graphicalReference">删除关联项</el-button>
                <el-button type="danger" @click="handleGraphicalDeleteAssociation"  v-if="checkPermi(['system:thesauriWordReference:remove']) && relationshipId && graphicalReference">删除关联项</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="relatedListView.title" :visible.sync="relatedListView.open" width="50%" append-to-body :close-on-click-modal="false">
            <el-button class="relatedWordsDialog" style="margin: 5px!important;" v-for="item in relatedListView.list" @click="handleUpdateReference(item)">{{item.referenceWordName}}</el-button>
        </el-dialog>

        <el-dialog :title="addAssociationDialog.title" :visible.sync="addAssociationDialog.open" width="60%" append-to-body :close-on-click-modal="false">
            <el-form :model="addAssociationDialog.queryParams" ref="addQueryForm" :inline="true"  label-width="auto">
                <el-form-item label="叙词名称" prop="wordName">
                    <el-input
                        v-model="addAssociationDialog.queryParams.wordName"
                        placeholder="请输入叙词名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleAddQuery"
                    />
                </el-form-item>
                <el-form-item label="叙词拼音" prop="wordPinyin">
                    <el-input
                        v-model="addAssociationDialog.queryParams.wordPinyin"
                        placeholder="请输入叙词拼音"
                        clearable
                        size="small"
                        @keyup.enter.native="handleAddQuery"
                    />
                </el-form-item>
                <el-form-item label="叙词英文" prop="wordEnglish">
                    <el-input
                        v-model="addAssociationDialog.queryParams.wordEnglish"
                        placeholder="请输入叙词英文"
                        clearable
                        size="small"
                        @keyup.enter.native="handleAddQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAddQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetAddQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="addAssociationDialog.loading" :data="addAssociationDialog.thesauriWordList" @selection-change="handleAddSelectionChange" ref="addAssociationTable">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column label="叙词名称" align="center" prop="wordName"/>
                <el-table-column label="叙词拼音" align="center" prop="wordPinyin"/>
                <el-table-column label="叙词英文" align="center" prop="wordEnglish"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:thesauriWord:edit']"
                        >修改
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                            v-hasPermi="['system:thesauriWord:remove']"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="addAssociationDialog.total>0"
                :total="addAssociationDialog.total"
                :page.sync="addAssociationDialog.queryParams.pageNum"
                :limit.sync="addAssociationDialog.queryParams.pageSize"
                @pagination="getAddList"
            />

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleGraphicalSelected"  v-if="addAssociationDialog.graphicalDisplay == 1">确 定</el-button>
                <el-button type="primary" @click="handleGraphicalRefresh"  v-else-if="addAssociationDialog.graphicalDisplay == 2">确 定</el-button>
                <el-button type="primary" @click="handleAddAssociationSubmit" v-else>确 定</el-button>
                <el-button @click="addAssociationDialogClose">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="graphicalDialog.title" :visible.sync="graphicalDialog.open" width="80%"  append-to-body :close-on-click-modal="false">
            <relation-chart @echartsNodeClick="echartsNodeClick" :serviceData="graphicalDialog.serviceData"></relation-chart>
        </el-dialog>

        <el-dialog :title="thesauriWordCategoryDialog.title" :visible.sync="thesauriWordCategoryDialog.open" width="30%" append-to-body :close-on-click-modal="false" class="spec-dialog">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="thesauriWordCategoryDialog.filterText">
            </el-input>
            <div style="margin:10px 5px">
                <el-button size="mini"  type="primary" @click="setAllExpand(true)">全部展开</el-button>
                <el-button size="mini"  type="primary" @click="setAllExpand(false)">全部折叠</el-button>
            </div>
            <el-tree
                class="filter-tree"
                :data="thesauriWordCategoryListTree"
                :props="thesauriWordCategoryDialog.defaultProps"
                default-expand-all
                :filter-node-method="thesauriWordCategoryFilterNode"
                show-checkbox
                :check-strictly="true"
                node-key="id"
                :default-checked-keys="getthesauriWordCategoryIdsList(form.thesauriWordCategoryIds)"
                ref="thesauriWordCategoryTree">
            </el-tree>

            <div slot="footer" class="dialog-footer">
                <el-button @click="thesauriWordCategoryDialogSubmit" type="primary">确 定</el-button>
                <el-button @click="thesauriWordCategoryDialogCancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listThesauriWord,
        getThesauriWord,
        delThesauriWord,
        addThesauriWord,
        updateThesauriWord,
        exportThesauriWord
    } from "@/api/system/thesauriWord";

    import {
        listThesauriWordRelation,
    } from "@/api/system/thesauriWordRelation";

    import {
        listThesauriWordModule,
    } from "@/api/system/thesauriWordModule";

    import {
        listThesauriWordCategory,
    } from "@/api/system/thesauriWordCategory";

    import {
        addThesauriWordReference,
        addThesauriWordReferenceMultivalued,
        delThesauriWordReference,
    } from "@/api/system/thesauriWordReference";

    import RelationChart from '@/views/dashboard/RelationChart'

    import toTreeData from '@/utils/toTreeData.js';

    import { checkPermi, checkRole } from "@/utils/permission";

    export default {
        name: "thesauriWord",
        components: {
            RelationChart
        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 叙词表数据加工表格数据
                thesauriWordList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    wordName: null,
                    wordPinyin: null,
                    wordEnglish: null,
                    thesauriWordCategoryIds: null,
                    wordPid: null,
                    thesauriWordModuleId: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                thesauriWordRelationList: [],
                thesauriWordModuleList: [],
                thesauriWordCategoryList: [],
                thesauriWordCategoryListTree: [],
                relatedListView: {
                    open: false,
                    title: "关联词查看",
                    list: []
                },
                relationshipId: null,
                graphicalReference: null,
                addAssociationDialog: {
                    //如果为ture是图像化展示弹窗。如果为否是添加关联项弹窗
                    //1：选择根节点  2：刷新图形化  3：添加关联项
                    graphicalDisplay: 3,
                    open: false,
                    title: "添加关联项",
                    queryParams: {
                        pageNum: 1,
                        pageSize: 10,
                        queryAssociation: "no",
                        wordName: null,
                        thesauriWordModuleId: null
                    },
                    loading: false,
                    total: 0,
                    ids: [],
                    thesauriWordId: null,
                    thesauriWordList: [],
                    referenceRelationLabel: null
                },
                graphicalDialog: {
                    open: false,
                    title: "图形化展示",
                    thesauriWord: null,
                    serviceData: {
                        datas: [],
                        links: []
                    }
                },
                thesauriWordCategoryDialog: {
                    open: false,
                    title: "选择所属分类",
                    filterText: null,
                    selectList: [],
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    }
                }
            };
        },
        watch: {
            'thesauriWordCategoryDialog.filterText': {
                handler(newName, oldName) {
                    this.$refs.thesauriWordCategoryTree.filter(newName);
                },
                deep: true,
            },
        },
        computed:{
            getthesauriWordCategoryIdsList:function(){
                return (thesauriWordCategoryIds)=>{
                    if(thesauriWordCategoryIds){
                        return thesauriWordCategoryIds.split(",").map(x=>parseInt(x))
                    }
                    return [];
                }
            }
        },
        created() {
            const thesauriWordModuleId = this.$route.params && this.$route.params.thesauriWordModuleId;
            this.queryParams.thesauriWordModuleId = thesauriWordModuleId;
            this.addAssociationDialog.queryParams.thesauriWordModuleId = thesauriWordModuleId;
            this.getThesauriWordModuleList();
            this.getThesauriWordCategoryList();
            Promise.all([this.getThesauriWordRelationList()]).then(() => {
                this.getList();
            }).catch(err => {
            });
        },
        methods: {
            checkPermi,
            checkRole,
            //获取叙词表分类
            async getThesauriWordCategoryList() {
                await listThesauriWordCategory({}).then(response => {
                    this.thesauriWordCategoryList = response.rows;
                    this.thesauriWordCategoryListTree = toTreeData(response.rows,{
                        id: "id",
                        pid: "parentId",
                        label: "categoryName",
                        value: "id",
                        children: ""
                    }, "parentId", null);
                });
            },
            //获取叙词表模板
            async getThesauriWordModuleList() {
                await listThesauriWordModule({}).then(response => {
                    this.thesauriWordModuleList = response.rows.map(item => {
                        return {
                            ...item,
                            value: item.id,
                            label: item.nameZh
                        }
                    });
                });
            },
            /** 查询叙词关系维护列表 */
            async getThesauriWordRelationList() {
                await listThesauriWordRelation({
                    thesauriWordModuleId: this.queryParams.thesauriWordModuleId
                }).then(response => {
                    this.thesauriWordRelationList = response.rows.map(item=>{
                        return {
                            id: item.id,
                            nameEn: item.nameEn,
                            nameZh: item.nameZh
                        }
                    });
                });
            },
            //删除关联项
            handleDeleteAssociation(){
                const ids = this.relationshipId;
                this.$modal.confirm('是否确认删除此关联项？').then(function () {
                    return delThesauriWordReference(ids);
                }).then(() => {
                    this.$modal.msgSuccess("删除成功");
                    this.open = false;
                    this.getList();
                }).catch(() => {
                });
            },
            //添加关联项
            handleAddAssociation(row, itemReference) {
                this.$set(this.addAssociationDialog, "open", true);
                this.$set(this.addAssociationDialog, "graphicalDisplay", 3);
                this.$set(this.addAssociationDialog, "thesauriWordId", row.id);
                this.$set(this.addAssociationDialog, "referenceRelationLabel", itemReference.nameEn);
                this.$set(this.addAssociationDialog, "queryParams", {
                    pageNum: 1,
                    pageSize: 10,
                    queryAssociation: "no",
                    wordName: null,
                    thesauriWordModuleId: this.queryParams.thesauriWordModuleId
                });
                this.$set(this.addAssociationDialog, "title", row.wordName+"-"+itemReference.nameZh+"("+itemReference.nameEn+")添加关联项");
                this.getAddList();
            },
            handleAddAssociationSubmit() {
                if(this.addAssociationDialog.ids.length > 0){
                    addThesauriWordReferenceMultivalued({
                        thesauriWordId: this.addAssociationDialog.thesauriWordId,
                        referenceWordIds: this.addAssociationDialog.ids,
                        referenceRelationLabel: this.addAssociationDialog.referenceRelationLabel,
                        thesauriWordModuleId: this.addAssociationDialog.queryParams.thesauriWordModuleId
                    }).then(response => {
                        this.$modal.msgSuccess("关联项添加成功");
                        this.$set(this.addAssociationDialog, "open", false);
                        this.getList();
                        this.$refs.addAssociationTable.clearSelection();
                    });
                }else{
                    this.$modal.msgWarning("请选择需要添加的关联项!");
                }
            },
            addAssociationDialogClose() {
                this.$set(this.addAssociationDialog, "open", false);
            },
            handleExpandTheAssociationList(row, itemReference) {
                this.$set(this.relatedListView, "open", true);
                this.$set(this.relatedListView, "title", row.wordName+"-"+itemReference.nameZh+"("+itemReference.nameEn+")关联词查看");
                this.$set(this.relatedListView, "list", row[itemReference.nameEn])
            },
            /** 查询叙词表数据加工列表 */
            getList() {
                this.loading = true;
                listThesauriWord(this.queryParams).then(response => {
                    this.thesauriWordList = response.rows.map(item => {
                        let tmp = {};
                        this.thesauriWordRelationList.map(itemR=>{
                            let referenceList = item.sysThesauriWordReferenceList.filter(x=>x.referenceRelationLabel == itemR.nameEn && x.referenceWordName);
                            // tmp[itemR.nameZh+"("+itemR.nameEn+")"] = referenceList;
                            tmp[itemR.nameEn] = referenceList;
                        });
                        return {
                            ...item,
                            ...tmp,
                        }
                    });
                    this.total = response.total;
                    this.loading = false;
                });
            },
            getAddList() {
                this.addAssociationDialog.loading = true;
                listThesauriWord(this.addAssociationDialog.queryParams).then(response => {
                    this.addAssociationDialog.thesauriWordList = response.rows;
                    this.addAssociationDialog.total = response.total;
                    this.addAssociationDialog.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    wordName: null,
                    isTopTerm: 0,
                    wordPinyin: null,
                    wordEnglish: null,
                    thesauriWordCategoryIds: null,
                    thesauriWordCategoryNames: null,
                    scopeNote: null,
                    usageNote: null,
                    historicalNote: null,
                    wordPid: null,
                    wordFormal: 0,
                    thesauriWordModuleId: parseInt(this.queryParams.thesauriWordModuleId)
                };
                this.resetForm("form");
                this.relationshipId = null;
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 搜索按钮操作 */
            handleAddQuery() {
                this.addAssociationDialog.queryParams.pageNum = 1;
                this.getAddList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            resetAddQuery(){
                this.resetForm("addQueryForm");
                this.handleAddQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            handleAddSelectionChange(selection) {
                this.addAssociationDialog.ids = selection.map(item => item.id)
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.graphicalReference = false;
                this.open = true;
                this.title = "添加叙词表数据加工";
            },

            /** 处理分类名称 **/
            handlingCategoryNames() {
                let thesauriWordCategoryIds = this.form.thesauriWordCategoryIds;
                if(thesauriWordCategoryIds){
                    let idsArr = thesauriWordCategoryIds.split(",");
                    this.form.thesauriWordCategoryNames = idsArr.map(item=>{
                        let filter = this.thesauriWordCategoryList.filter(x=>x.id == item);
                        if(filter.length){
                            return filter[0]["categoryName"];
                        }
                        return null;
                    }).filter(x=>x).join(",")
                }
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids;
                getThesauriWord(id).then(response => {
                    this.form = response.data;
                    this.form.isTopTerm = parseInt(this.form.isTopTerm);
                    this.form.wordFormal = parseInt(this.form.wordFormal);
                    this.handlingCategoryNames();
                    this.graphicalReference = false;
                    this.open = true;
                    this.title = "修改叙词表数据加工";
                });
            },
            handleUpdateReference(row) {
                this.reset();
                const id = row.referenceWordId;
                getThesauriWord(id).then(response => {
                    this.form = response.data;
                    this.form.isTopTerm = parseInt(this.form.isTopTerm);
                    this.form.wordFormal = parseInt(this.form.wordFormal);
                    this.handlingCategoryNames();
                    this.relationshipId = row.id;
                    this.graphicalReference = false;
                    this.open = true;
                    this.title = "查看叙词表数据加工关联";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateThesauriWord(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                                this.getAddList();
                            });
                        } else {
                            addThesauriWord(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                                this.getAddList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除叙词表数据加工编号为"' + ids + '"的数据项？').then(function () {
                    return delThesauriWord(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$modal.confirm('是否确认导出所有叙词表数据加工数据项？').then(() => {
                    this.exportLoading = true;
                    return exportThesauriWord(queryParams);
                }).then(response => {
                    this.$download.name(response.msg);
                    this.exportLoading = false;
                }).catch(() => {
                });
            },
            handleGraphic() {
                let datas = [];
                let links = [];
                if(!this.graphicalDialog.thesauriWord){
                    datas.push({
                        category: 0,
                        name: "+",
                        symbolSize: 60,
                        label: "+",
                        weight: 10
                    });
                    this.thesauriWordRelationList.map(item=>{
                        datas.push({
                            category: 1,
                            name: item.nameZh+"("+item.nameEn+")",
                            symbolSize: 50,
                            weight: 8
                        },{
                            category: 2,
                            name: "+("+item.nameEn+")",
                            symbolSize: 40,
                            weight: 6
                        })
                        links.push({
                            source: "+",
                            target: item.nameZh+"("+item.nameEn+")",
                        },{
                            source: item.nameZh+"("+item.nameEn+")",
                            target: "+("+item.nameEn+")",
                        })
                    })
                }else{
                    listThesauriWord({
                        id: this.graphicalDialog.thesauriWord.id,
                        pageNum: 1,
                        pageSize: 10,
                    }).then(response => {
                        this.graphicalDialog.thesauriWord = response.rows[0];
                        const rootNodeName = this.graphicalDialog.thesauriWord.wordName;
                        datas.push({
                            category: 0,
                            name: rootNodeName,
                            symbolSize: 60,
                            label: "+",
                            weight: 10
                        });
                        let sysThesauriWordReferenceList = this.graphicalDialog.thesauriWord.sysThesauriWordReferenceList.filter(x=>x.referenceWordId != x.thesauriWordId);
                        this.thesauriWordRelationList.map(item=>{
                            datas.push({
                                category: 1,
                                name: item.nameZh+"("+item.nameEn+")",
                                symbolSize: 50,
                                weight: 8
                            },{
                                category: 2,
                                name: "+("+item.nameEn+")",
                                symbolSize: 40,
                                thesauriWordId: this.graphicalDialog.thesauriWord.id,
                                thesauriWordName: this.graphicalDialog.thesauriWord.wordName,
                                referenceNameEn: item.nameEn,
                                referenceNameZh: item.nameZh,
                                weight: 6
                            });
                            links.push({
                                source: rootNodeName,
                                target: item.nameZh+"("+item.nameEn+")",
                            },{
                                source: item.nameZh+"("+item.nameEn+")",
                                target: "+("+item.nameEn+")",
                            });
                            sysThesauriWordReferenceList.map(itemr=>{
                                if(itemr.referenceRelationLabel == item.nameEn){
                                    datas.push({
                                        id: itemr.id.toString(),
                                        category: 3,
                                        name: itemr.referenceWordName,
                                        thesauriWordId: this.graphicalDialog.thesauriWord.id,
                                        referenceWordId: itemr.referenceWordId,
                                        symbolSize: 30,
                                        weight: 4
                                    });
                                    links.push({
                                        source: item.nameZh+"("+item.nameEn+")",
                                        target: itemr.id.toString(),
                                    })
                                }
                            })
                        })
                    });
                }
                this.$set(this.graphicalDialog.serviceData, "datas", datas);
                this.$set(this.graphicalDialog.serviceData, "links", links);
                this.$set(this.graphicalDialog, "open", true);
            },
            echartsNodeClick(params) {
                if(params.data.category == 0){
                    this.$set(this.addAssociationDialog, "open", true);
                    this.$set(this.addAssociationDialog, "graphicalDisplay", 1);
                    this.$set(this.addAssociationDialog, "queryParams", {
                        pageNum: 1,
                        pageSize: 10,
                        wordName: null,
                        thesauriWordModuleId: this.queryParams.thesauriWordModuleId
                    });
                    this.$set(this.addAssociationDialog, "title", "选择图形化展示叙词");
                    this.getAddList();
                }else if(params.data.category == 2 && params.data.thesauriWordId){
                    this.handleGraphicalAddAssociation({
                        id: params.data.thesauriWordId,
                        wordName: params.data.thesauriWordName,
                    },{
                        nameEn: params.data.referenceNameEn,
                        nameZh: params.data.referenceNameZh,
                    });
                }else if(params.data.category == 2 && !params.data.thesauriWordId){
                    this.$modal.msgWarning("请选择主题款目词");
                }else if(params.data.category==3){
                    this.handleGraphicalUpdateReference({
                        id: params.data.id,
                        referenceWordId: params.data.referenceWordId,
                    })
                }
            },
            handleGraphicalSelected(){
                if(this.addAssociationDialog.ids.length > 0){
                    if(this.addAssociationDialog.ids.length == 1){
                        this.graphicalDialog.thesauriWord = this.addAssociationDialog.thesauriWordList.filter(x=>x.id==this.addAssociationDialog.ids[0])[0];
                        this.handleGraphic();
                        this.$refs.addAssociationTable.clearSelection();
                        this.$set(this.addAssociationDialog, "open", false);
                    }else{
                        this.$modal.msgWarning("只能选择一个叙词进行图形化展示!");
                    }
                }else{
                    this.$modal.msgWarning("请选择图形化展示的叙词!");
                }
            },
            handleGraphicalAddAssociation(row, itemReference) {
                this.$set(this.addAssociationDialog, "open", true);
                this.$set(this.addAssociationDialog, "graphicalDisplay", 2);
                this.$set(this.addAssociationDialog, "thesauriWordId", row.id);
                this.$set(this.addAssociationDialog, "referenceRelationLabel", itemReference.nameEn);
                this.$set(this.addAssociationDialog, "queryParams", {
                    pageNum: 1,
                    pageSize: 10,
                    queryAssociation: "no",
                    wordName: null,
                    thesauriWordModuleId: this.queryParams.thesauriWordModuleId
                });
                this.$set(this.addAssociationDialog, "title", row.wordName+"-"+itemReference.nameZh+"("+itemReference.nameEn+")添加关联项");
                this.getAddList();
            },
            handleGraphicalRefresh() {
                if(this.addAssociationDialog.ids.length > 0){
                    addThesauriWordReferenceMultivalued({
                        thesauriWordId: this.addAssociationDialog.thesauriWordId,
                        referenceWordIds: this.addAssociationDialog.ids,
                        referenceRelationLabel: this.addAssociationDialog.referenceRelationLabel,
                        thesauriWordModuleId: this.addAssociationDialog.queryParams.thesauriWordModuleId
                    }).then(response => {
                        this.$modal.msgSuccess("关联项添加成功");
                        this.$set(this.addAssociationDialog, "open", false);
                        this.getList();
                        this.$refs.addAssociationTable.clearSelection();
                        listThesauriWord({
                            id: this.graphicalDialog.thesauriWord.id,
                            pageNum: 1,
                            pageSize: 10,
                        }).then(response => {
                            this.graphicalDialog.thesauriWord = response.rows[0];
                            this.handleGraphic();
                        });
                    });
                }else{
                    this.$modal.msgWarning("请选择需要添加的关联项!");
                }
            },
            handleGraphicalUpdateReference(row) {
                this.reset();
                const id = row.referenceWordId;
                getThesauriWord(id).then(response => {
                    this.form = response.data;
                    this.form.isTopTerm = parseInt(this.form.isTopTerm);
                    this.form.wordFormal = parseInt(this.form.wordFormal);
                    this.handlingCategoryNames();
                    this.relationshipId = row.id;
                    this.graphicalReference = true;
                    this.open = true;
                    this.title = "查看叙词表数据加工关联";
                });
            },
            handleGraphicalDeleteAssociation(){
                const ids = this.relationshipId;
                this.$modal.confirm('是否确认删除此关联项？').then(function () {
                    return delThesauriWordReference(ids);
                }).then(() => {
                    this.$modal.msgSuccess("删除成功");
                    this.open = false;
                    this.getList();
                    listThesauriWord({
                        id: this.graphicalDialog.thesauriWord.id,
                        pageNum: 1,
                        pageSize: 10,
                    }).then(response => {
                        this.graphicalDialog.thesauriWord = response.rows[0];
                        this.handleGraphic();
                    });
                }).catch(() => {
                });
            },
            handleSelectThesauriWordCategory() {
                this.thesauriWordCategoryDialog.open = true;
            },
            //筛选节点
            thesauriWordCategoryFilterNode(value, data,node) {
                if (!value) {
                    node.expanded = false;
                    return true;
                }
                return this.checkBelongToChooseNode(value, data, node);
            },
            // 判断传入的节点是不是选中节点的子节点
            checkBelongToChooseNode(value, data, node) {
                if (data.label.indexOf(value) !== -1){
                    return true;
                }
                const level = node.level;
                // 如果传入的节点本身就是一级节点就不用校验了
                if (level === 1) {
                    return false;
                }
                // 先取当前节点的父节点
                let parentData = node.parent;
                // 遍历当前节点的父节点
                let index = 0;
                while (index < level - 1) {
                    // 如果匹配到直接返回
                    if (parentData.data.label.indexOf(value) != -1) {
                        return true;
                    }
                    // 否则的话再往上一层做匹配
                    parentData = parentData.parent;
                    index ++;
                }
                // 没匹配到返回false
                return false;
            },
            //设置全部展开和折叠。state参数为bool值
            setAllExpand(state) {
                var nodes = this.$refs.thesauriWordCategoryTree.store.nodesMap;
                for (var i in nodes) {
                    nodes[i].expanded = state;
                }
            },
            // 节点单击事件
            handleNodeClick(data) {
                this.thesauriWordCategoryDialog.thesauriWordCategoryId = data.id;
            },
            thesauriWordCategoryDialogCancel() {
                this.thesauriWordCategoryDialog.open = false;
            },
            thesauriWordCategoryDialogSubmit() {
                let checkedNodes = this.$refs.thesauriWordCategoryTree.getCheckedNodes();
                if(checkedNodes.length){
                    this.form.thesauriWordCategoryIds = checkedNodes.map(x=>x.id).join(",");
                    this.form.thesauriWordCategoryNames = checkedNodes.map(x=>x.label).join(",");
                }else{
                    this.form.thesauriWordCategoryIds = "";
                    this.form.thesauriWordCategoryNames = null;
                }
                this.thesauriWordCategoryDialog.open = false;
            },
        }
    };
</script>
<style>
    .relatedWords {
        margin: 1px !important;
        padding: 5px;
    }

    .addTo {
        margin: 1px !important;
        padding: 5px 8px;
    }

    .relatedWordsDialog {
        margin: 5px !important;
        padding: 5px;
    }
    .el-form-item .el-select {
     width: 100%;
    }

    .spec-dialog .el-dialog__body {
        padding: 3px 30px;
        overflow-y: auto;
        height: calc(90vh - 100px);
    }

</style>
